<template>
	<div class="app-container">
		<el-row class='content-container'>
			<span class="label-titile">课程名称</span>
			<el-input v-model="reqData.screenCourseName" placeholder="请输入课程名称" style="width:200px" @keyup.enter.native="search"></el-input>
			<el-button type="primary" @click="search">搜索</el-button>
		</el-row>
		<el-row class="content-container">
			<el-table :data="list" style="width: 100%">
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column prop="companyName" label="企业名称" align="center"></el-table-column>
				<el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
				<el-table-column prop="starttime" label="开课时间" align="center"></el-table-column>
				<el-table-column prop="endtime" label="截至时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="400px">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="changDate(scope.row)">修改有效期</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalResultSize" :current-page="reqData.currentPage" :page-count="totalPageSize" :page-sizes="[10, 20, 30, 50]" :page-size="reqData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>
		</el-row>
		
		<el-dialog title="课程有效期" :visible.sync="dialogVisible">
			<el-form :model="form" label-width="110px" style='width: 80%;margin-left: 30px;' ref="dataForm">
	
				<el-form-item label="企业名称">
					<el-input v-model="form.companyName" class="input-width" readonly></el-input>
				</el-form-item>
			
				<el-form-item label="课程名称">
					<el-input v-model="form.courseName" class="input-width" readonly></el-input>
				</el-form-item>
					
				<el-form-item label="有效期类型" >
					<el-select v-model="validityDateType" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="天数" v-show="validityDateType == 'days'">
					<el-input v-model="form.overdueDays" class="input-width"></el-input>
				</el-form-item>	
				<el-form-item label="到期时间" v-show="validityDateType == 'date'">
				  	<el-date-picker
				      v-model="form.overdueDate"
				      type="date"
				      placeholder="选择日期">
				    </el-date-picker>
				</el-form-item>	
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="updateData">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { getCourseList, updateCompanyCourse} from '@/api/company'
	import { getMomentValue} from '@/utils/index'
	export default {
		data() {
			return {
				list: [],
				totalPageSize: 0,
				totalResultSize: 0,
				reqData: {
					currentPage: 1,
					companyId: "",
					screenCourseName:""
				},
				dialogVisible:false,
				form:{
					companyName:'',
					courseName:"",
					id:"",
					overdueDays:"",
					overdueDate:""
					
				},
				validityDateType:"days",
				options:[
					{value: "days",label: "按天数"},
					{value: "date",label: "按到期时间"}
				]
					
				
			}
		},
		created(){
			let id = this.$route.query.id;
			this.reqData.companyId = id;
			this.getList(this.reqData);
		},
		methods: {
			getList(data){
				getCourseList(data).then((res)=>{
					let entitys = res.entity;
					this.list = [...entitys.data];
					this.totalPageSize = entitys.page.totalPageSize;
					this.totalResultSize = entitys.page.totalResultSize;
				})
			},
			handleSizeChange(val) {
				this.reqData["pageSize"] = val;
			 	this.reqData.currentPage = 1;
			 	this.getList(this.reqData);
			},
			handleCurrentChange(val){
				this.reqData.currentPage = val; 
		    	this.getList(this.reqData);	
				
			},
			resetCurrent(){
				this.reqData.currentPage = 1;
			},
			search(){
				this.resetCurrent();
				this.getList(this.reqData);	
			},
			changDate(row){
				this.form.companyName = row.companyName;
				this.form.courseName = row.courseName;
				this.form.id = row.id;
				this.dialogVisible = true;
			},
			resetForm(){
				this.form = {
					companyName:'',
					courseName:"",
					id:"",
					overdueDays:"",
					overdueDate:""
				};
				this.validityDateType = '';
			},
			closeDialog(){
				this.resetForm();
				this.dialogVisible = false;
			},
			updateData(){
				let validityDateType = this.validityDateType;
				let data = {
					companyId:this.reqData.companyId,
					orderDetailId:this.form.id,
					
				};
				switch (validityDateType){
					case "":
					this.$message.error('请选择有效期类型');
					return;
						break;
					case "days":
					data["overdueDays"] = this.form.overdueDays;
					data["overdueType"] = 1;
						break;
					case "date":
					data["overdueDate"] = getMomentValue(this.form.overdueDate);
					data["overdueType"] = 0;
						break;
					default:
						break;
				}
				updateCompanyCourse(data).then((res)=>{
					this.getList(this.reqData);
					this.dialogVisible = false;
				});
				
				
			}
			

		},
		
	}
</script>

<style scoped>
	.input-width{
		width: 200px;
	}
</style>